CSS Layout - display: inline-block

---

The display: inline-block Value

Compared to display: inline, the major difference is that display: inline-block allows you to set a width and height on the element.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

The following example shows the different behavior of display: inline, display: inline-block and display: block:

Output :

Using inline-block to Create Navigation Links

One common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates horizontal navigation links:

Output :